<template>
    <div class="zwp-login">
        <el-form class="zwp-login-form" :model="loginForm">
            <el-form-item>
                <el-input v-model="loginForm.account" type="text" autofocus="true" placeholder="account"
                          @keyup.enter.native="handleLogin"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="loginForm.password" type="password" placeholder="password"
                          @keyup.enter.native="handleLogin"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="loginForm.kaptcha" type="text" placeholder="验证码" style="width: 62%"
                          @keyup.enter.native="handleLogin"></el-input>
                <img :src="kaptchaUrl" @click="refreshKaptcha"
                     style="position: relative; top: 15px; left: 5px; width: 100px; height: 40px">
            </el-form-item>
            <el-form-item>
                <el-button style="width: 100%" type="primary" @click="handleLogin"
                           @keyup.enter.native="handleLogin">登录
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

    import {userLogin} from "../../api/platform/login"
    import {getPublicKey} from "../../api/platform/rsa";
    import EncryptUtils from "../../utils/EncryptUtils";


    import router from '../../router'

    export default {
        name: "Login",
        data() {
            return {
                loginForm: {
                    account: 'admin',
                    password: '123456',
                    kaptcha: "",
                },
                newLoginForm: {},
                kaptchaUrl: ""
            }
        },
        methods: {
            handleLogin() {
                getPublicKey(this.loginForm.account).then(response => {
                    this.newLoginForm = this.loginForm
                    this.newLoginForm.password = EncryptUtils.encrypt(this.newLoginForm.password, response.data.publicKey);
                    userLogin(this.newLoginForm).then(response => {
                        if (response.code == 200) {
                            router.push({path: '/dormitory'})
                        }
                    }).catch(error => {
                        console.log(error)
                    })
                }).catch(error => {
                    console.log(error)
                })
            },
            refreshKaptcha() {
                let num = Math.ceil(Math.random() * 100);//生成一个随机数（防止缓存）
                this.kaptchaUrl = "/api/platform/kap/create/" + num
            }
        },
        created() {
            this.refreshKaptcha();
        }
    }
</script>

<style scoped>
    .zwp-login {
        width: 100%;
        height: 100%;
        /*background: url("../../assets/login.png") no-repeat;*/
        /*background-size: 100% 100%;*/
        background: rgb(143, 176, 224);
    }

    .zwp-login-form {
        margin: 0 auto;
        padding-top: 20%;
        width: 300px;
    }
</style>
